<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix header-box">
                <span>文章分类</span>
                <el-button type="primary" size="mini" @click="dialogVisible = true">添加分类</el-button>
                <el-dialog title="添加文章分类" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="75px" class="demo-addForm">
                        <el-form-item label="分类名称:" prop="cate_name">
                            <el-input v-model="addForm.cate_name"></el-input>
                        </el-form-item>
                        <el-form-item label="分类别名:" prop="cate_alias">
                            <el-input v-model="addForm.cate_alias"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="add">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
            <!-- 表格区域 -->
            <el-table stype="width: 100%;" :data="cateList" border stripe>
                <el-table-column label="序号" type="index" width="100"></el-table-column>
                <el-table-column label="分类名称" prop="cate_name"></el-table-column>
                <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row }">
                        <el-button type="primary" size="mini" @click="patch(row.id)">修改</el-button>
                        <el-button type="danger" size="mini" @click="del(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="修改文章分类" :visible.sync="updateDialog" width="30%" :before-close="handleClose">
                <el-form :model="updateForm" :rules="addRules" ref="updateForm" label-width="75px">
                    <el-form-item label="分类名称:" prop="cate_name">
                        <el-input v-model="updateForm.cate_name" value="123"></el-input>
                    </el-form-item>
                    <el-form-item label="分类别名:" prop="cate_alias">
                        <el-input v-model="updateForm.cate_alias"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialog = false">取 消</el-button>
                    <el-button type="primary" @click="update">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'ArtCate',
    data() {
        return {
            cateList: [],
            dialogVisible: false,
            updateDialog: false,
            addForm: {
                cate_name: '',
                cate_alias: ''
            },
            updateForm: {},
            addRules: {
                cate_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
                ],
                cate_alias: [
                    { required: true, message: '请输入分类别名', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        async initCateList() {
            const { data: res } = await this.$http.get('/my/cate/list')
            // console.log(res);
            if (res.code != 0) return this.$message.error(res.message)
            this.cateList = res.data
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        add() {
            this.$refs.addForm.validate(async valid => {
                if (!valid) return
                const { data: res } = await this.$http.post('/my/cate/add', this.addForm)
                // console.log(res);
                if (res.code != 0) return this.$message.error('添加失败')
                this.$message.success('添加成功')
                this.dialogVisible = false
                this.initCateList()
            })
        },
        async patch(id) {
            const { data: res } = await this.$http.get('/my/cate/info', { params: { id } })
            // console.log(res);
            if (res.code != 0) return
            this.updateForm = res.data
            this.updateDialog = true
        }
        ,
        update() {
            this.$refs.updateForm.validate(async valid => {
                if (!valid) return
                const { data: res } = await this.$http.put('/my/cate/info', this.updateForm)
                // console.log(res);
                if (res.code != 0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.updateDialog = false
                this.initCateList()
            })
        },
        async del(id) {
            const a = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            if (a) {
                const { data: res } = await this.$http.delete('/my/cate/del', { params: { id } })
                // console.log(res);
                if (res.code != 0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.initCateList()
            }
        }
    },
    created() {
        this.initCateList()
    },
}
</script>

<style lang="less" scoped>
.header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
